<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"  style="display:inline;"></app-title>
        <!--<app-notes>...</app-notes>-->
<el-button type="success"  @click="refresh()"round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
         <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column prop="userName" label="用户名"  align="center"></el-table-column>
                <el-table-column prop="isActive" label="激活状态"  align="center">
                     <template slot-scope="scope" >
                         <el-switch v-model="scope.row.isActive" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </template>
                    
                </el-table-column>
                
                
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="ok(scope.row.userName, scope.row.isActive)">应用</el-button>
                    </template>
                </el-table-column>
            </el-table>

        
        <el-alert :title="errorMsg" type="warning" :closable="false" show-icon v-show="!issafe"> </el-alert>


        
    </div>

</template>
<style>
    .el-table .warning-row {
        background: #F08080;
    }

    .el-table .success-row {
        background:#f0f9eb;
    }
</style>
<script>
    export default {
        name:'useractivestatus',
        data(){
            var validateIp = (rule, value, callback) => {

                this.HTTP.methods.apiGet("/ajax/ip/check.shtml?ip="+this.selectValue).then(res =>
                {
                    if(res.code != 200){
                    this.okEnable = true;
                    callback(new Error(res.msg))
                }else{
                    this.okEnable = false;
                    callback()
                }
            })

            }
            return {
                statusList: [{
                    value: 1,
                    label: '激活'
                },{
                    value: 0,
                    label: '非激活'
                }],
                validateRules:{
                    selectValue:[{ validator: validateIp,  trigger: 'blur', required: true, message:"IP输入非法"}]
                },
                dialogTitle:"超期用户管理",
                status:1,
                lastIp: "",
                lastRow: {},
                loading: false,
                editTableShow: false,
                selectUserName:"",
                formLabelWidth: "100px",
                okEnable: true,
                tableData:[

                ],
                errorMsg:"您的信息有误，请联系管理员修改",
                issafe:true

            }
        },
        mounted(){
            this.query()
        },
        methods:{
            refresh(){
            this.query()
        },
            ipfocus:function () {
                this.okEnable = true;
            },
            tableRowClassName({row, rowIndex}) {
                if(this.issafe === false){
                    return 'warning-row';
                }else{
                    return 'success-row'
                }
            },
            ok(userName, isActive){
                this.editTableShow = false


                this.HTTP.methods.apiPost("/user/inactiveusercfg.shtml",{userName:userName,
                    isActive:isActive==true?1:0 }).then(res =>{
                    if (res.code != 200) {
                        for(let i=0; i<this.tableData.length; i++){
                            if(this.tableData[i].userName === userName){
                                this.tableData[i].isActive = !this.tableData[i];
                            }
                        }
                        this.$message(res.msg);
                    } else {
                        for(var i=0; i<this.tableData.length; i++) {
                            if (this.tableData[i].userName == this.selectUserName) {
                                this.tableData[i].ipEffective = res.ip;
                                console.log(res.ip)
                            }
                        }
                        this.$message("更新激活状态成功");
                    }

                    }).catch(function (error) {
                            for(let i=0; i<this.tableData.length; i++){
                                    if(this.tableData[i].userName === userName){
                                        this.tableData[i].isActive = !this.tableData[i].isActive;
                                    }
                                }
                           $.message("网络超时", 'error')

                    })
            },
            cancel(){
                this.editTableShow = false
                this.selectVal = 1

            },
            query(){
                this.HTTP.methods.apiGet("/user/inactiveuserget?pageNum=1&pageSize=100").then(res =>
                {
                    if(res.code == 200){
                    for(let i=0; i<res.data.list.length; i++){
                        res.data.list[i].isActive = res.data.list[i].isActive === 1?true:false; 
                    }
                    this.tableData = res.data.list;

                }else{
                    this.tableData.body = []
                }
            }).catch(function (error) {
                    this.$message("网络超时", 'error')
            })
            }
        }
    }
</script>


